import {Component} from 'react';
import {connect} from 'dva';
import {Link} from 'dva/router';
import {List} from 'antd';
import {PullToRefresh, TabBar} from 'antd-mobile';
import Icon from '../../../component/Icon';
import Banner from './Store/Banner';
import styles from './css/Store.css';
/* WaterWave */
import WaterWave from 'water-wave';
import 'water-wave/style.css';

class Store extends Component {
	
	render() {
		let {state, dispatch} = this.props;
		let {refreshing} = state;
		
		return (
			<PullToRefresh 
				className={styles.refreshContainer}
				direction='down' 
				distanceToRefresh={25} 
				damping={100}
				refreshing={refreshing} 
				onRefresh={() => {
					dispatch({
						type: 'store/setRefreshing',
						refreshing: true
					});
					setTimeout(() => {
						dispatch({
							type: 'store/setRefreshing',
							refreshing: false
						});
					}, 2000)
				}} 
			>
				<div className={styles.bannerContainer}>
					<Banner />
					{/*<img className={styles.banner} src={require('../asset/img/banner.jpg')} />*/}
				</div>
				<div className={styles.zone}>
					<div className={styles.zoneItem}>
						<Icon className={styles.classifyLogo} type={require('../asset/svg/classify.svg')} />
						<span className={styles.classifyPrompt}>全部分类</span>
					</div>
					<div className={styles.zoneItem}>
						<Icon className={styles.hotLogo} type={require('../asset/svg/hot.svg')} />
						<span className={styles.hotPrompt}>热门读本</span>
					</div>
					<div className={styles.zoneItem}>
						<Icon className={styles.newLogo} type={require('../asset/svg/new.svg')} />
						<span className={styles.newPrompt}>最新上架</span>
					</div>
					<div className={styles.zoneItem}>
						<Icon className={styles.freeLogo} type={require('../asset/svg/free.svg')} />
						<span className={styles.freePrompt}>限免专区</span>
					</div>
					<WaterWave color="#E6E6E6" duration={500} radius={40} />
				</div>
				{/* 热门读本 */}
				<div className={styles.zoneContainer}>
					<div className={styles.hotTitle}>
						热门读本
					</div>
				</div>
				{/* 最新上架 */}
				<div className={styles.zoneContainer}>
					<div className={styles.newTitle}>
						最新上架
					</div>
				</div>
				{/* 限免专区 */}
				<div className={styles.zoneContainer}>
					<div className={styles.freeTitle}>
						限免专区
					</div>
					<div>
						<div>
							我是图片
						</div>
						<div>
							<div>
								我是描述
							</div>
							<div>
								我是点赞
							</div>
						</div>
					</div>
				</div>
			</PullToRefresh>
		);
	}
	
}

export default connect((state) => ({
	state: {
		...state.store,
		loading: state.loading.models.store
	}
}))(Store);
